\documentclass[journal]{IEEEtran}


% correct bad hyphenation here
%\hyphenation{op-tical net-works semi-conduc-tor}


\begin{document}

\title{Visual Learning on the Web}

\author{David~Anderson,\\
        Will~Davis,\\
        and~Curtis~Taylor\\
        University of Tennessee - Knoxville\\
        \{dander40,wdavis27,ctaylo86\}@utk.edu\\% <-this % stops a space
}

% make the title area
\maketitle


\begin{abstract}
Visual Learning is a web-based teaching tool that will enhance a teacher's ability to provide interactive examples. These examples will give a student fill-in-the-blank programs in order to teach certain programming practices. This allows students to see well written code and practice writing code on their own. All programming and assignment changes are done via web browser, which makes this effort universal to anyone with an internet connection.
\end{abstract}

% Note that keywords are not normally used for peerreview papers.
\begin{IEEEkeywords}
visual, learning, Web.
\end{IEEEkeywords}

\IEEEpeerreviewmaketitle
\section{Project Goal and Description}
The goal of this project is to help new programmers learn a programming language by using partially completed program examples, a "user friendly" interface (i.e., intuitive), visualization of code, and eliminating the process of compiling and/or making using makefiles and learning the underlying operating system. We plan to accomplish this by creating an instructor and a student side of this tool. The instructor side will provide a tool for creating fill-in-the-blank code problems and providing the answers so that the teachers grading can be automated. The student side will allow students to complete provided problems and receive instant feedback regarding their solution. By providing these two sides to the application, we strive to meet the goal of allowing teachers to provide examples while still testing students ability to program. This testing of students programming ability will also be enhance because students only need to worry about coding rather than learning tools like IDEs, Linux, or vim.

\section{Project Team}
The project team consists of four members with a variety of skill sets that are well suited to accomplish this project.

\subsection{Curtis Taylor} 
Team leader - knowledgeable in C, C++, PHP, HTML, Perl, Java and in UNIX administration. As team leader, I ensure tasks are delegated to the team and help to see that benchmarks are met throughout the duration.

\subsection{David Anderson}
Senior in computer science. Experienced with web programming and the MVC pattern of programming.

\subsection{William Davis}
A senior in computer science at the University of Tennessee in Knoxville. Has a skill set that includes the following languages: C, C++, Java, Python, and a growing ability with web-based programming.

\subsection{Dr. Brad Vander Zanden - Mentor}
Professor in the Department of Electrical Engineering and Computer Science at The University of Tennessee.

\section{Incremental Development Plan and Results}
\subsection{Web Site}
Our first step will be to create the website in which we can host our tool. This requires several steps. First, we have to contact lab staff to set up the website on the servers at the University of 
Tennessee. Next is to initialize the MySQL database that we will be using to store all the information our tool requires. After that, we will install a content management system (CMS) called Joomla in order to create a website quickly and efficiently.

\subsection{Student Side}
Once the website is running, the next phase of the process will begin. In this increment we will begin by setting up the website and database to allow individuals to create user accounts. Anyone will be able to create a username and password as long as that person has an email account. The next step will be to create a student interface and at least one example problem. This will involve using HTML to display the web page. PHP will pipe the data into C++ code, and then the C++ code will be compiled with g++. If the program compiles, it will be run, and the output will be sent back through PHP. Finally, the result will be displayed for the user to see. If the code does not compile, the g++ error will be display to the user instead. In addition to running the student's program, the output will be compared to the correct solution provided by the instructor, and the student will be informed if he/she was correct. If correct, the grading portion of the database will be updated to reflect the user's solution was correct.
% this is done using the student's unique ID and name? add this is for more information

\subsection{Teacher Side}
The next phase will be to create the instructor's interface. The first thing we will do is set up the permissions so that only the instructor's user account will be the only user with the ability to access this interface. Then we will write the HTML and PHP code to make the layout. On the instructor page, there will be text boxes for the instructor to put in a problem's code. There will be another text box to put in the solution code. At the bottom of the page there will be a button to preview the problem that the teacher has created. Upon approval of the problem, the instructor will have the option to press create the problem, which in turn places the assignment in the database. In order for this to happen, we must create a database to handle and store all the created problems. Once this step is complete, the instructor page will work like this: the instructor will go to the instructor page, fill out the problem form, preview the problem, test the problem, and then submit the problem. Upon submission, the information gets sent to the database, and from there, it will show up on the list of problems page.

\subsection{Finalization}
In this step, we will be optimizing our tool and ensuring the security requirements are met. We will fulfil all the security elements outlined in the dependability section of this report. We will also clean up the website and ensure everything is running as it has been described. Additionally, there will be thorough testing of our tool. This will be accomplished by creating problems, solving them, and making sure each part of the tool does as it should. We will be adding the grading feature to keep track of each student's completion status for all the problems. In addition to that, we will also create the page for the teacher to view the grades and for a student to view his/her grades.

\section{Validation (Do the right job.) Plan and Results}
\subsection{Plan}
To ensure that our team has accomplished that task given to us, we have met with and given biweekly demonstrations to our mentor, Professor Brad Vander Zanden. Through these meetings we have discussed our progress and adapted our planning to reflect current progress and received clarification on any ambiguous points. This has provided a time for our mentor to add, remove or change any feature(s) that he desires. Because of this constant re-adaptation, both our group and mentor have been protected from miscommunication on either end and ensured that we have provided the product our mentor desires.

\subsection{Results}
We believe that we have been able to do the right job because of these biweekly meetings. They were very helpful in order for us to fulfil the requests and requirements Brad Vander Zanden had for us. These meetings kept us on track, enabled us to ask questions after we had worked on different parts, and kept us on a timeline so that we could complete the task we set out to finish, and as a result, we have a working product.


\section{Verification (Do the job right.) Plan and Results}
\subsection{Plan}
To verify that our web application actually meets its goal of being a tool to enhance both the teaching and learning side of coding, our group plans to allow Brad Vander Zanden's CS 102 class to use this tool and provide feedback. Also, we have limited the tools we used to create this application to ensure that this application can run correctly on any of the major web browsers which effectively ensures universal access across system platforms that it will run on. Additionally, we have tested each page of this site to ensure that it accomplishes the job assigned to it. These are as follows:
\newline
a. Web Site - We will have to make sure the web site is accessible, functional and is easy to use.
\newline
b. Student Side - We made sure students are able to create accounts, login, see the problems and be able to complete the problems successfully, assuming they have the proper knowledge.
\newline
c. Teacher Side - We also ensure the instructor can create an account, login, create problems, test them, and submit them to the database.
\newline
d. Database - In order for any of the other criteria to be met, we made sure that the website was communicating properly with the database. It needs to be able to store the problems created by teachers, then retrieve them when a student tries to access a problem.

\subsection{Results}
Our original plan to have this tested in a classroom setting did not happen. We were not able to get the application in a solid working condition until it was too late in the semester for it to be tested with with Brad Vander Zanden's CS 102 class. However, we did verify that our project met Brad Vander Zanden's requirements. We successfully created a website that hosts our learning tool. We were able to complete the student side of the application, students are able to create accounts, work on problems, test them, and submit them for a grade. The teacher side was also completed, instructor(s) are able to create and edit problems, test them, submit them to the database, and view grades. Lastly, the database is also working. It is able to store the data for the website and for the problems that the instructor submits.

\section{Dependability (security) case}
These are the security issues, and how we plan to deal with them:
\subsection{Server Security}
Our website is located on the servers at the University of Tennessee. Since our website runs many programs and as it is used it will run programs that will be developed in the future, the server needs to be protected. We will overcome this security issue by setting the correct system file server permission levels. The lab staff handles a significant amount of the server’s security.
\subsection{Security of User Input}
In several instances, our tool receives user input and then displays that onto our website. We have to ensure that users do not input JavaScript, or any malicious web-based code. We will have to validate all user input by converting the input to a ``safe form". We will accomplish this by removing dangerous code tags such as ``$<$" and ``$>$" and replacing them with the html safe version: ``\&lt{"} and ``\&gt{"}.
\subsection{SQL Security}
Since our website interacts with a MySQL database in order to store all the information it uses, we have to ensure that no user can inject anything into the database. This is simply accomplished by not giving any user access or permission to contact the database. We will be using built-in PHP functions to check user input and make sure they cannot interact with MySQL.
\subsection{Basic Website Security}
Each individual that wants to use our tool will have to create an account to interact with our website. We set the permission levels for each account created. We ensure that every user does not have the privileges to modify our website. Also a student account cannot see the teacher tools. Only the teacher accounts will have the permissions to create problems, and new teachers must receive their initial permission from a user who already has administrator privileges. 
\subsection{Grade Security}
Due to the FERPA Act, we must make sure that grades are kept hidden and secured so that only the teacher will be able to see all the student's grades. Also we have to make sure that each student can only see their own grades and not anyone else's.


\section{Use of Mathematics}
Our team has made use of mathematics by analyzing the algorithms used by this application. The use of math has enabled this team to decide which algorithms would grant the most efficiently to this application's requirements. 

\section{Use of Science}
Our team has used computer science through out all the design and building of this web application. This includes all scripting and hard-coded logic used by our website

\section{Use of Engineering}
Our team has made use of engineering through implementing a SQL database to efficiently store all information. 

%\begin{figure}[!t]
%\centering
%\includegraphics[width=2.5in]{myfigure}
% where an .eps filename suffix will be assumed under latex, 
% and a .pdf suffix will be assumed for pdflatex; or what has been declared
% via \DeclareGraphicsExtensions.
%\caption{Simulation Results}
%\label{fig_sim}
%\end{figure}



% use section* for acknowledgement
\section*{Acknowledgments}
Dr. Poore, Dr. Brad Vander Zanden


% Can use something like this to put references on a page
% by themselves when using endfloat and the captionsoff option.
\ifCLASSOPTIONcaptionsoff
  \newpage
\fi
\bibliographystyle{IEEEtran}
\bibliography{Biblio}


% that's all folks
\end{document}

